<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<p>{{msg}}</p>
			<p>{{reverseMsg}}</p>
			<p>{{reverseMsg2()}}</p>
			<p>{{now}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					msg: "hello"
				},
				// 计算属性,是基于它们的响应式依赖进行缓存的
				computed: {
					reverseMsg() {
						console.log('计算属性重新执行')
						return this.msg.split('').reverse().join(''); 
					},
					now(){
						return new Date();
					}
				},
				methods:{
					reverseMsg2:function(){
						console.log('计算方法重新执行')
						return this.msg.split('').reverse().join(''); 
					}
				}
			});
			
			console.log(vm.reverseMsg);
			//计算属性，缓存，不会重新执行
			console.log(vm.reverseMsg);
			console.log(vm.reverseMsg);
			//计算方法，不缓存，每次重新执行
			console.log(vm.reverseMsg2());
			console.log(vm.reverseMsg2());
			vm.msg="test";
			
			//缓存，不会重新执行
			console.log(vm.now);
			console.log(vm.now);
			console.log(vm.now);
			console.log(vm.now);
		</script>

	</body>
</html>
